<template>
  <div id="clusters">
    <el-table :data="clusterInfo.clusters" stripe style="width: 100%">
      <el-table-column prop="ip" label="服务器IP" align="left"></el-table-column>
      <el-table-column prop="name" label="服务器名称" align="left"></el-table-column>
      <el-table-column prop="startTime" :formatter="startTimeFormatter" label="服务启动时间" align="left"></el-table-column>
      <el-table-column prop="checkTime" :formatter="checkTimeFormatter" label="缓存检测时间" align="left"></el-table-column>
      <el-table-column prop="inFatching" :formatter="inFatchingFormatter" label="是否在抓取邮件" align="left"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'ClusterInfo',
  data() {
    return {
        clusterInfo:{
            nowFatchingServer:{},
            clusters:[]
        },
        intervalOfgetClusterInfoId:0
    }
  },
  mounted: function () {
      this.intervalOfgetClusterInfoId = setInterval(()=>{
          this.getClusterInfo();
      },3000);
      console.log("启动了定时任务获取集群信息...");
  },
  destroyed:function(){
      clearInterval(this.intervalOfgetClusterInfoId);
      console.log("定时任务获取集群信息已结束!");
  },
  methods:{
    getClusterInfo:function(){
        //获取集群相关信息
        this.$http.get("state/clusterInfo").then(res=>{
            this.clusterInfo = res.data;
        });
    },
    startTimeFormatter:function(row){
        return new Date(row.startTime).toLocaleString();
    },
    checkTimeFormatter:function(row){
        return new Date(row.checkTime).toLocaleString();
    },
    inFatchingFormatter:function(row){
        return row.inFatching==true?"是":"否";
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#buttons{
  text-align: left;
}
</style>
